import React, { useEffect } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Menu } from 'antd';
import { useDispatch, useSelector, shallowEqual } from 'react-redux'

import menus from '../../config/menu_config'
import { selectNavAction } from '../../store/actionCreators/admin'
import './left_nav.less'
import Logo from '../../assets/img/logo.png'


const { SubMenu } = Menu;

function LeftNav(props) {

  const dispatch = useDispatch()

  const { adminInfo, roles,username } = useSelector((state) => ({
    adminInfo: state.adminInfo.current_nav,
    roles: state.userInfo.user.role.menus,
    username:state.userInfo.user.username
  }), shallowEqual)

  const { pathname } = props.location
  // 处理默认的打开的左菜单
  const currentOpen = pathname.split('/')
  useEffect(() => {
    if (!adminInfo) {
      getCurrentNav()
    }
  }, [pathname])

  // 当redux中没有当前左边菜单的信息时
  const getCurrentNav = () => {
    let length = pathname.split('/').length - 1
    let key = pathname.split('/')[length]
    if (currentOpen.indexOf('product') !== -1) key = 'product'

    menus.forEach((menu) => {
      // 一种是有子菜单的情况
      if (menu.children instanceof Array) {
        menu.children.forEach((child) => {
          if (key === child.key) {
            dispatch(selectNavAction(child.title))
          }
        })
      } else {
        if (key === menu.key) {
          //一种是没有子菜单的情况
          dispatch(selectNavAction(menu.title))
        }
      }
    })

  }

  // 点击MeNU.Item,dispatch当前的项
  const addLeftNav = (current) => {
    dispatch(selectNavAction(current))
  }

  // 用于判断是否有权限显示
  const hasAuth = (menuObj) => {
    
    // 当用户为超级管理员的时候
    if(username === 'admin'){
      return true
    }

    // 当不是菜单的子元素时
    if (!menuObj.children) {
      return roles.find((role) => role === menuObj.key)
    } else {
      // 是菜单的子元素时
      return menuObj.children.some((item) => roles.includes(item.key) !== -1)
    }

  }

  // 自动生成菜单
  const createMenus = (menus) => {
    return menus.map((item, index) => {
      if (hasAuth(item)) {
        if (!item.children) {
          // 如果没有子菜单
          return (
            <Menu.Item key={item.key} icon={<item.icon />} onClick={e => addLeftNav(item.title)}>
              <Link to={item.path}>{item.title}</Link>
            </Menu.Item>
          )
        } else {
          return (
            <SubMenu key={item.key} title={item.title} icon={<item.icon />}>
              {createMenus(item.children)}
            </SubMenu>
          )
        }
      }
    })
  }

  // 处理选中的左菜单的项
  const handlePathName = () => {
    const { pathname } = props.location
    const length = pathname.split('/').length - 1
    if (currentOpen.indexOf('product') !== -1) return 'product'
    return pathname.split('/')[length]
  }



  return (
    <div className="left-nav">
      <div className="nav-header">
        <img src={Logo} alt="" />
        <h1>商品管理系统</h1>
      </div>
      <div className="nav-content">
        <div>
          <Menu
            selectedKeys={[handlePathName()]}
            defaultOpenKeys={currentOpen}
            mode="inline"
            theme="dark"
          >
            {createMenus(menus)}
          </Menu>
        </div>

      </div>
    </div>
  )
}

export default withRouter(LeftNav)




